<template>
  <view class="withdrawal_">
    <view class="withdrawal_money">
      <image
        src="https://www.ylnumber.cn/file/test/productImage/20230713/7eb0886fe2ab4e38ad72ef48d397835a.png"
      />
      <view class="info_money">
        <text>可转账金额(元)</text>
        <view>
          ￥
          <text>{{ income }}</text>
        </view>
      </view>
    </view>
    <view class="info_wrapper">
      <view class="title_">
        <image src="/static/withdrawal/2.png"></image>
        <text>转账金额</text>
      </view>
      <view class="form_wrapper">
        <u-form :model="formData" ref="uForm">
          <view class="item_wrapper">
            <view class="left_">
              <!--                <text>￥</text>-->
              <u-form-item
                label="￥"
                prop="money"
                label-width="56"
                :label-style="{
                  fontSize: '48rpx',
                  fontWeight: 'bold',
                  color: '#353535',
                }"
              >
                <u-input
                  v-model="formData.money"
                  type="number"
                  placeholder="满10元以上可转账"
                />
              </u-form-item>
            </view>
            <view class="right_" @tap="fullWithdrawalFn">全部转账</view>
          </view>
        </u-form>
      </view>
      <view class="content_wrapper">
       <!-- <view class="commission_">
          <image src="/static/withdrawal/1.png"></image>
          <text>额外扣除转账金额{{ commission_percentage }}%个人所得税</text>
        </view> -->
        <view class="way_wrapper">
          <view class="title_">
            <image src="/static/withdrawal/2.png"></image>
            <text>转账到</text>
          </view>
          <view class="way_">
            <view>
              <u-input
                v-model="phoneValue"
                :type="type"
                :border="border"
                placeholder="请输入转账人手机号/ID号"
              />
            </view>
          </view>
          <view class="but_wrapper" @tap="submit"> 立即转账 </view>
        </view>
      </view>
    </view>
    <view class="footer_wrapper">
      <view class="title_">
        <image src="/static/withdrawal/2.png"></image>
        <text>转账规则</text>
      </view>
      <view class="info_">
        <p>
          1、个人所得税:每笔转账，“易联小铺”将为您代缴个人所得税，税率为6%，你无需提供发票。
        </p>
        <p>2、购物积分:每笔转账“易联小铺”将为您增加9%的购物积分。</p>
        <p>
          3、如在转账过程中有任何疑问，请致电“易联小铺’客服电话4008261913咨询
        </p>
      </view>
    </view>
    <u-modal
      v-model="show"
      :title-style="{ color: 'red' }"
      @cancel="cancel"
      @confirm="confirm"
      ref="uModal"
      :show-title="false"
      :async-close="true"
      :show-cancel-button="true"
      :confirm-color="'#FA5151'"
      :confirm-text="'确定'"
      :confirm-style="{
        borderLeft: '1px solid rgba(0,0,0,0.1)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }"
    >
      <view class="slot-content">
        <view class="content_wrapper">
          <view class="logo_">
            <image
              class="img_1"
              src="https://www.ylnumber.cn/file/test/productImage/20230707/3b0fc58cc0c64ef79eca1ce3756419f2.png"
            ></image>
            <image
              class="img_2"
              src="https://www.ylnumber.cn/file/test/productImage/20230707/dc581c7484f549b3a2182f126faddcba.png"
            ></image>
          </view>
          <view class="main_wrapper">
            <view class="item_info">
              <view class="top_">
                <view class="item_">
                  <text>申请转账金额</text>
                  <view> ￥{{ formData.money }} </view>
                </view>
                <view class="item_">
                  <text>个人所得税扣除{{ commission_percentage }}%</text>
                  <view> ￥{{ formData.serviceCharge }} </view>
                </view>
                <view class="item_">
                  <text>购物积分{{ integral_percentage }}%</text>
                  <view> ￥{{ formData.integralAccounts }}</view>
                </view>
              </view>
              <view class="money_total">
                <view>
                  <view>实际转账金额</view>
                  <view>￥{{ formData.actualAmount }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-modal>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { getServiceCharge, transferAccounts } from "@/api/transferAccount";

export default {
  name: "index.vue",
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onShow() {
    this.getCommissionProportionApi();
    this.formData.userId = uni.getStorageSync("userId") || "";
  },
  onLoad(options) {
    console.log(options, "参数");
    this.income = +options.income;
  },
  data() {
    return {
      phoneValue: "",
      type: "text",
      border: true,
      toggleInt: false,
      income: "",
      show: false,
      //手续费百分比
      commission_percentage: 0,
      //积分百分比
      integral_percentage: 0,
      formData: {
        //转账用户
        userId: "",
        //收款人id
        payeeUserId: "",
        //收款人手机号
        phone: "",
        //转账金额
        money: "",
        //实际金额
        actualAmount: 0,
        //服务费
        serviceCharge: 0,
        //积分费
        integralAccounts: 0,
      },
      rules: {
        money: [
          // {
          //   required: true,
          //   message: "请输入转账金额",
          //   trigger: ["blur", "change"],
          //   // 可以单个或者同时写两个触发验证方式
          // },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              console.log(value, "value");
              if (value < 10) {
                return callback("转账最低金额为10");
              } else {
                // 上面有说，返回true表示校验通过，返回false表示不通过
                // this.$u.test.mobile()就是返回true或者false的
                callback();
              }
            },
            message: "转账最低金额为10",
            // 触发器可以同时用blur和change
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    //查询转账手续费
    async getCommissionProportionApi() {
      const res = await getServiceCharge();
      console.log(res, "res");
      if (res.code === 0) {
        this.toggleInt = true;
        const { integralAccounts, transferAccounts } = res.data;
        //服务费
        this.commission_percentage = transferAccounts;
        //积分
        this.integral_percentage = integralAccounts;
      }
    },

    //全部转账
    fullWithdrawalFn() {
      if (this.income === 0) {
        uni.showToast({
          title: "无可转账余额",
          icon: "error",
          duration: 2000,
        });
        return;
      }
      this.formData.money = this.income;
    },

    async confirm() {
      console.log("点击了确定");
      if (uni.getStorageSync("token")) {
        const res = await transferAccounts(this.formData);
        console.log(res, "res");
        if (res.code === 0) {
          uni.setStorageSync("userInfoServer", res.data);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        }
        this.show = false;
      }
    },
    cancel() {
      console.log("点击了取消");
      this.show = false;
    },
    //计算积分百分比和手续费
    toggle() {
      //手续费百分比
      this.formData.serviceCharge =
        this.formData.money * (this.commission_percentage / 100);
      //积分百分比
      this.formData.integralAccounts =
        this.formData.money * (this.integral_percentage / 100);

      this.formData.actualAmount =
        this.formData.money -
        (this.formData.serviceCharge + this.formData.integralAccounts);

      this.formData.serviceCharge = this.formData.serviceCharge.toFixed(2);
      this.formData.integralAccounts =
        this.formData.integralAccounts.toFixed(2);
      this.formData.actualAmount = this.formData.actualAmount.toFixed(2);
    },

    submit() {
      console.log(this.formData, "data");
      console.log(this.income, "this.income");
      if (!this.formData.userId) {
        uni.showModal({
          title: "温馨提示",
          content: "此时此刻需要您登录喔~",
          // showCancel: false,
          confirmText: "去登录",
          cancelText: "再逛会",
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/empower/mp-weixin",
              });
            }
            if (res.cancel && getCurrentPages().length > 1) {
              uni.navigateBack();
            }
          },
        });
        return;
      }

      const userId = uni.getStorageSync("userId") || "";
      const phoneNumber = uni.getStorageSync("phoneNumber") || "";
      console.log(userId,'userId')
      console.log(phoneNumber,'phoneNumber')
      if (
        userId &&
        userId === Number(this.phoneValue) ||
        phoneNumber &&
        phoneNumber === this.phoneValue
      ) {
        this.$refs.uToast.show({
          title: "不能转给自己哦!",
          type: "error",
        });
        return;
      }

      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (this.income >= this.formData.money) {
            this.toggle();
            console.log("验证通过");
            console.log(this.formData, "data");
            if (!this.phoneValue) {
              this.$refs.uToast.show({
                title: "请输入转账人手机号/ID号",
                type: "error",
              });
              return;
            } else {
              if (!/^1[3456789]\d{9}$/.test(this.phoneValue)) {
                this.formData.payeeUserId = this.phoneValue;
                this.formData.phone = "";
              } else {
                this.formData.payeeUserId = "";
                this.formData.phone = this.phoneValue;
              }
            }
            console.log(this.formData, "formData");
            if (this.toggleInt) {
              this.show = true;
            } else {
              this.$refs.uToast.show({
                title: "获取数据失败，请重新加载小程序再试!",
                type: "error",
              });
            }
          } else {
            uni.showToast({
              title: "转账余额不足",
              icon: "error",
              duration: 2000,
            });
          }
        } else {
          console.log("验证失败");
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.withdrawal_ {
  min-height: 100vh;
  > .withdrawal_money {
    position: relative;
    > image {
      width: rpx(375);
      height: rpx(170);
      vertical-align: middle;
    }
    > .info_money {
      position: absolute;
      top: rpx(24);
      left: rpx(12);
      > text {
        font-size: rpx(12);
        font-weight: 400;
        color: #ffffff;
      }
      > view {
        margin-top: rpx(4);
        font-size: rpx(12);
        font-weight: bold;
        color: #ffffff;
        > text {
          font-size: rpx(22);
        }
      }
    }
  }
  > .info_wrapper {
    padding: rpx(16) rpx(12);
    background: #ffffff;
    border-radius: rpx(5);
    position: relative;
    margin: rpx(-72) rpx(12) rpx(8);
    > .title_ {
      > image {
        width: rpx(3);
        height: rpx(13);
        margin-right: rpx(5);
        vertical-align: middle;
      }
      > text {
        font-size: rpx(13);
        font-weight: bold;
        color: #353535;
      }
    }
    > .form_wrapper {
      border-bottom: rpx(1) solid #efefef;
      u-form::v-deep {
        .u-border-bottom:after {
          border: none;
        }
      }
      .item_wrapper {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        > .left_ {
          display: flex;
          align-items: center;
          > text {
            font-size: rpx(24);
            font-weight: bold;
            color: #353535;
            margin-right: rpx(4);
          }
        }
        > .right_ {
          font-size: rpx(13);
          font-weight: 400;
          color: #fa5151;
        }
      }
    }
    > .content_wrapper {
      > .commission_ {
        display: flex;
        align-items: center;
        margin-top: rpx(10);
        > image {
          vertical-align: middle;
          width: rpx(14);
          height: rpx(14);
          margin-right: rpx(4);
        }
        > text {
          font-size: rpx(12);
          font-weight: 400;
          color: #353535;
        }
      }
      > .way_wrapper {
        // margin-top: rpx(31);
		margin-top: rpx(11);
        > .title_ {
          > image {
            width: rpx(3);
            height: rpx(13);
            margin-right: rpx(5);
            vertical-align: middle;
          }
          > text {
            font-size: rpx(13);
            font-weight: bold;
            color: #353535;
          }
        }
        > .way_ {
          margin-top: rpx(16);
          > view {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: rpx(1) solid #efefef;
            ::v-deep u-input {
              width: 100%;
              .u-input {
                border: 0;
              }
            }
          }
        }
        > .but_wrapper {
          width: rpx(327);
          height: rpx(40);
          background: #FA5151;
          border-radius: rpx(20);
          font-size: rpx(17);
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: rpx(24);
        }
      }
    }
  }
  > .footer_wrapper {
    padding: rpx(16) rpx(12);
    margin: rpx(0) rpx(12);
    background: #ffffff;
    border-radius: rpx(5);
    > .title_ {
      > image {
        width: rpx(3);
        height: rpx(13);
        margin-right: rpx(5);
        vertical-align: middle;
      }
      > text {
        font-size: rpx(13);
        font-weight: bold;
        color: #353535;
      }
    }
    > .info_ {
      margin-top: rpx(10);
      p {
        font-size: rpx(12);
        font-weight: 400;
        color: #888888;
      }
    }
  }
}

.slot-content {
  > .content_wrapper {
    .logo_ {
      padding: rpx(16) rpx(0);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      > .img_1 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: rpx(319);
        height: rpx(64);
      }
      > image.img_2 {
        width: rpx(72);
        height: rpx(72);
        vertical-align: middle;
        position: relative;
        z-index: 99;
      }
    }
    > .main_wrapper {
      padding: rpx(0) rpx(12) rpx(16);
      > .item_info {
        padding: rpx(12) rpx(12) rpx(16);
        background: #fafafa;
        border-radius: rpx(5);
        > .top_ {
          display: flex;
          flex-direction: column;
          border-bottom: rpx(1) solid #e9e9e9;
          padding-bottom: rpx(4);
          > .item_ {
            display: flex;
            justify-content: space-between;
            padding-bottom: rpx(12);
            > text {
              font-size: rpx(13);
              font-weight: 400;
              color: #888888;
            }
            > view {
              font-size: rpx(13);
              font-weight: 400;
              color: #353535;
            }
          }
        }
        > .money_total {
          padding-top: rpx(16);
          > view {
            justify-content: space-between;
            display: flex;
            view:first-child {
              font-size: rpx(13);
              font-weight: bold;
              color: #353535;
            }
            view:last-child {
              font-size: rpx(13);
              font-weight: bold;
              color: #fa5151;
            }
          }
        }
      }
    }
  }
}
</style>
